<template>
  <div class>
    <!-- 自定义导航栏 -->
    <gh-navbar id="navbar" :showback="true" title="我的留言咨询" />
    <div class="order">
      <div class="line"></div>
      <div class="header box">
        <div class="problem">{{list.problem}}</div>
        <div class="header-hybrid">
          <div class="question-tag" v-if="list.main_title">{{list.main_title}}</div>
          <div class="time">{{list.createtime}}</div>
        </div>
      </div>
      <div class="answer">
        共
        <text class="total">{{list.reply_count}}</text>位律师回答
      </div>
      <div class="content-box" v-if="list.reply.length == 0">
        <div class="content-text">
          <div class="content-title">
            <text class="label">在线咨询:</text>
            <text class="price">
              <text class="money">￥{{money}}</text>
              /{{time}}
            </text>
          </div>
          <div class="content-tip">
            <div>即时沟通，平时五分钟回复</div>
            <div>案情分析，获得针对性解答</div>
            <div>问题解答率高达99%</div>
          </div>
        </div>
        <button class="submit" @click="handleSubmit">立即付费使用</button>
      </div>
      <div class="all-answer" v-else>
        <!-- 循环 -->
        <div class="answer-item" v-for="(item, index) in reply_list" :key="index">
          <div class="cai-text" v-if="item.adopt == 1">
            <text class="iconfont icon-gouxuan"></text>采纳答案
          </div>
          <div class="lawyer">
            <navigator :url="'/pages/lawer/detail?id=' + item.reply_id">
              <image class="avatar" :src="item.reply_avatar" mode="widthFix" />
            </navigator>
            <div class="info">
              <div class="name">{{item.reply_realname}}</div>
              <div class="lawyer-tag">
                <text>{{item.gh_text}}</text>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-title">{{item.answer}}</div>
          </div>
          <div class="answer-hybrid">
            <div class="left">
              <div class="time">{{item.createtime}} 回复</div>
            </div>
            <div class="right">
              <!-- list.status == 2 已经采纳过 -->
              <div class="cai" v-if="list.status != 2" @click="handleCai(item, index)">采纳</div>
              <!-- evaluate_status == true 已经评价 -->
              <navigator
                v-if="!item.evaluate_status"
                :url="'/pageMy/menu/comment?id='+item.id+'&orderid='+list.id+'&lawyerid='+item.reply_id+'&type=0'"
                class="comment"
              >评价</navigator>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: null,
      orderid: 0, // 订单id
      money: '',
      time: '', // 60分钟
      reply_list: [], // 回复数据数组
      page: 1,
      length: 0,
    }
  },
  methods: {
    async init(page = 1){
      const res = await this.$gh
      // .request("member.open_consultation", {
      .request("member.order", {
        data: {
          op: "detailOrder",
          service_type: 0,
          orderid: this.orderid,
          page,
          psize: 20
        }
      })
      .catch(err => {
        // uni.hideLoading();
        if (err.code == 41009) {
          this.$store.dispatch("login", err.message);
        }
      });
      this.list = res.data.list
      this.reply_list = this.reply_list.concat(res.data.list.reply)
      this.length = res.data.list.reply.length
      // 律师回复数组
      let arr = res.data.list.reply
      if(!arr) return
      arr.forEach(element => {
        // 超过3个大分类显示...  差点被难倒
        if(element.main_category.length > 3){
          element.main_category.length = 3
          element.main_category[2] = element.main_category[2]+'...'
        }
        element.gh_text = element.main_category.join('、')
      })
    },
    handleSubmit(){
      let that = this
      uni.navigateTo({
         url: `/pageIndex/menu/order?id=${that.orderid}&type=1`
      });
    },
    handleCai({id}, index){
      // element.adopt = 1 代表采纳
      this.$gh.request('member.order',{
        data:{
          op: 'editOrderAdopt',
          hid: id,
          orderid: this.orderid
        }
      }).then( res => {
        if(res.code == 200){
          uni.showToast({
            mask: true,
            icon: 'success',
            title: '采纳成功',
            duration: 2000
          });
          // 不展示采纳按钮
          this.list.status = 2
          this.reply_list[index].adopt = 1
          let obj = this.reply_list[index]
          this.reply_list.splice(index, 1)
          this.reply_list.unshift(obj)
        }
      })
    }
  },
  async onShow(){
    this.reply_list = []
    this.init()
  },
  onReachBottom(){
    if(this.length < 20) return
    this.page++
    this.init(this.page)
  },
  async onLoad(e) {
    this.orderid = e.id
    const res = await this.$gh.request("member.order", {
      data: {
        op: "getPreOrder",
        consultation_type: 1
      }
    });
    const {
      charge,
      duration,
      time_unit,
      member,
      consultation_type
    } = res.data.list;
    this.money = parseFloat(charge);
    const unit = time_unit == "minute" ? "分钟" : "天";
    this.time = duration + unit;
  },
};
</script>
<style lang='less' scoped>
@import url("../../common/util.less");
.order {
  .line {
    height: 10rpx;
  }
  .box {
    padding: 25rpx;
    background-color: #fff;
  }
  .header {
    .problem {
      font-size: 30rpx;
      color: @deep-color;
      padding: 0rpx 0 25rpx;
    }

    .header-hybrid {
      .flex();
      .question-tag {
        padding: 10rpx;
        font-size: 26rpx;
        color: @font-color;
        margin-right: 30rpx;
        border: 1px solid @font-color;
      }

      .time {
        font-size: 26rpx;
        color: @font-color;
      }
    }
  }

  .answer {
    .flex();
    height: 75rpx;
    font-size: 26rpx;
    color: @font-color;
    padding-left: 25rpx;
    .total {
      font-size: 26rpx;
      color: @deep-color;
    }
  }
  .content-box {
    padding: 0rpx 20rpx 40rpx;
    background-color: #fff;
    border-radius: 20rpx;
    border: 0.5rpx solid rgba(240, 240, 240, 0.5);
    margin-top: 13rpx;
    .content-text {
      .content-title {
        color: #6c76a7;
        margin: 40rpx 0 33rpx;
        .label {
          font-size: 30rpx;
        }
        .price {
          font-size: 26rpx;
          margin-left: 10rpx;
        }
        .money {
          color: red;
        }
      }
      .content-tip {
        font-size: 26rpx;
        color: @font-color;
      }
    }
    .submit {
      .gh-center();
      width: 620rpx;
      height: 80rpx;
      margin: 65rpx auto;
      background-color: #849aff;
      border-radius: 40rpx;
      color: #fff;
      font-size: 36rpx;
      border: none;
    }
  }

  .all-answer {
    .answer-item {
      padding: 25rpx;
      background-color: #fff;
      margin-bottom: 10rpx;
      .cai-text {
        font-size: 26rpx;
        color: #fea388;
        margin-bottom: 30rpx;
        .icon-gouxuan {
          font-size: 30rpx;
        }
      }
      .lawyer {
        .flex();
        .avatar {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          margin-right: 10rpx;
        }

        .info {
          .name {
            font-size: 30rpx;
            color: @deep-color;
            margin-bottom: 20rpx;
          }

          .lawyer-tag {
            font-size: 26rpx;
            color: @font-color;
          }
        }
      }
      .item {
        .gh-between();
        padding: 25rpx 0;
        .item-title {
          font-size: 30rpx;
          color: @deep-color;
        }
      }
      .answer-hybrid {
        .gh-between();
        .left {
          .time {
            font-size: 26rpx;
            color: @font-color;
          }
        }
        .right {
          .flex();
          .cai {
            padding: 8rpx 25rpx;
            border-radius: 25rpx;
            background-color: #fea388;
            font-size: 24rpx;
            color: #fff;
            margin-right: 20rpx;
          }
          .comment {
            padding: 8rpx 25rpx;
            border-radius: 25rpx;
            background-color: #abb2ce;
            font-size: 24rpx;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>